<template>
    <!-- 主容器：Office文档预览示例页面 -->
    <div class="example-container">
        <!-- 页面标题 -->
        <h2>Office 文档预览示例</h2>
    
        <!-- 示例文档选择区域 -->
        <div class="example-section">
            <h3>快速预览测试</h3>
            <p>点击下面的按钮来测试不同格式的文档预览：</p>
      
            <!-- 演示文档按钮组 -->
            <div class="test-buttons">
                <!-- 动态生成不同格式的文档预览按钮 -->
                <el-button 
                    v-for="doc in testDocuments" 
                    :key="doc.name"
                    @click="previewDocument(doc)"
                    :type="doc.type === 'PDF' ? 'danger' : doc.type === 'Word' ? 'primary' : doc.type === 'Excel' ? 'success' : 'warning'"
                >
                    {{ doc.name }}
                </el-button>
            </div>
        </div>

        <!-- 文档预览区域：当选择了文档时显示 -->
        <div v-if="currentDocument" class="preview-container">
            <!-- 预览头部信息栏 -->
            <div class="preview-header">
                <!-- 文件类型标签 -->
                <el-tag :type="getTagType(currentDocument.type)">
                    {{ currentDocument.type }}
                </el-tag>
                <!-- 文件名 -->
                <span class="doc-name">{{ currentDocument.name }}</span>
                <!-- 关闭预览按钮 -->
                <el-button @click="closePreview" size="small" type="danger">
                    关闭预览
                </el-button>
            </div>
      
            <!-- 预览iframe容器 -->
            <div class="preview-frame">
                <!-- 嵌入的文档预览iframe -->
                <iframe 
                    :src="currentDocument.viewerUrl" 
                    width="100%" 
                    height="600px"
                    frameborder="0"
                    allowfullscreen
                ></iframe>
            </div>
        </div>

        <!-- 功能说明区域 -->
        <div class="info-section">
            <h3>功能说明</h3>
            <ul>
                <li>支持预览 Word、Excel、PowerPoint、PDF 等格式</li>
                <li>使用 Microsoft Office Online Viewer 服务</li>
                <li>支持全屏预览模式</li>
                <li>响应式设计，适配不同屏幕尺寸</li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import OfficeViewer from '@/utils/officeViewer';

/**
 * 测试文档接口定义
 * @property name - 文档显示名称
 * @property type - 文档类型（用于样式和标签显示）
 * @property viewerUrl - 预览服务的完整URL
 */
interface TestDocument {
  name: string
  type: string
  viewerUrl: string
}

/**
 * 当前选中的文档
 * 当用户点击文档按钮时，此值会被设置为对应的文档对象
 * 当用户关闭预览时，此值会被设置为null
 */
const currentDocument = ref<TestDocument | null>(null);

/**
 * 测试文档列表
 * 包含不同格式的示例文档，用于演示预览功能
 * 
 * 注意：
 * - 这些URL必须是公开可访问的
 * - 使用OfficeViewer工具类动态生成预览URL
 * - 所有文档都使用Microsoft Office Online Viewer服务
 */
const viewer = new OfficeViewer({ service: 'microsoft' });

const testDocuments = ref<TestDocument[]>([
    {
        name: '示例PDF文档',
        type: 'PDF',
        // 使用OfficeViewer工具类生成预览URL
        viewerUrl: viewer.generateViewerUrl('https://estate-micro-test.tangees.com/localfiles/1754294943-%E6%96%87%E6%A1%A31.pdf')
    },
    {
        name: '示例Word文档',
        type: 'Word',
        // 使用OfficeViewer工具类生成预览URL
        viewerUrl: viewer.generateViewerUrl('https://estate-micro-test.tangees.com/localfiles/1754388143-测试.docx')
    },
    {
        name: '示例Excel表格',
        type: 'Excel',
        // 使用OfficeViewer工具类生成预览URL
        viewerUrl: viewer.generateViewerUrl('https://estate-micro-test.tangees.com/localfiles/1754388143-测试.xlsx')
    },
    {
        name: '示例PPT演示',
        type: 'PowerPoint',
        // 使用OfficeViewer工具类生成预览URL
        viewerUrl: viewer.generateViewerUrl('https://estate-micro-test.tangees.com/localfiles/1754398507-测试ppt.pptx')
    }
]);

/**
 * 预览文档
 * 当用户点击文档按钮时调用此函数
 * 
 * @param doc - 要预览的文档对象
 * 
 * 使用示例：
 * ```typescript
 * // 在模板中调用
 * @click="previewDocument(doc)"
 * 
 * // 或者在代码中调用
 * previewDocument({
 *   name: '我的文档',
 *   type: 'PDF',
 *   viewerUrl: 'https://example.com/document.pdf'
 * })
 * ```
 */
const previewDocument = (doc: TestDocument) => {
    currentDocument.value = doc;
};

/**
 * 关闭预览
 * 当用户点击关闭按钮时调用此函数
 * 将当前文档设置为null，隐藏预览区域
 * 
 * 使用示例：
 * ```typescript
 * // 在模板中调用
 * @click="closePreview"
 * 
 * // 或者在代码中调用
 * closePreview()
 * ```
 */
const closePreview = () => {
    currentDocument.value = null;
};

/**
 * 获取标签类型
 * 根据文档类型返回对应的Element Plus标签类型
 * 用于设置标签的颜色样式
 * 
 * @param type - 文档类型
 * @returns Element Plus标签类型字符串
 * 
 * 标签类型对应关系：
 * - PDF: 'danger' (红色)
 * - Word: 'primary' (蓝色)
 * - Excel: 'success' (绿色)
 * - PowerPoint: 'warning' (橙色)
 * - 其他: 'info' (灰色)
 * 
 * 使用示例：
 * ```typescript
 * const tagType = getTagType('PDF') // 返回 'danger'
 * const tagType = getTagType('Word') // 返回 'primary'
 * ```
 */
const getTagType = (type: string) => {
    const typeMap: Record<string, string> = {
        'PDF': 'danger',
        'Word': 'primary',
        'Excel': 'success',
        'PowerPoint': 'warning'
    };
    return typeMap[type] || 'info';
};
</script>

<style scoped>
/* 主容器样式 */
.example-container {
  max-width: 1200px; /* 最大宽度限制 */
  padding: 20px; /* 内边距 */
  margin: 0 auto; /* 水平居中 */
}

/* 示例区域样式 */
.example-section {
  margin-bottom: 30px; /* 底部间距 */
}

/* 测试按钮组样式 */
.test-buttons {
  display: flex; /* 弹性布局 */
  gap: 10px; /* 按钮间距 */
  margin-top: 15px; /* 顶部间距 */
  flex-wrap: wrap; /* 允许换行 */
}

/* 预览容器样式 */
.preview-container {
  margin-bottom: 30px; /* 底部间距 */
  overflow: hidden; /* 隐藏溢出内容 */
  border: 1px solid #e4e7ed; /* 边框 */
  border-radius: 8px; /* 圆角 */
}

/* 预览头部样式 */
.preview-header {
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 15px; /* 元素间距 */
  padding: 15px 20px; /* 内边距 */
  background-color: #f5f7fa; /* 背景色 */
  border-bottom: 1px solid #e4e7ed; /* 底部边框 */
}

/* 文档名称样式 */
.doc-name {
  flex: 1; /* 占据剩余空间 */
  font-weight: 500; /* 字体粗细 */
  color: #333; /* 文字颜色 */
}

/* 预览框架样式 */
.preview-frame {
  padding: 0; /* 无内边距 */
}

/* iframe样式 */
.preview-frame iframe {
  display: block; /* 块级显示 */
  border: none; /* 无边框 */
}

/* 信息区域样式 */
.info-section {
  padding: 20px; /* 内边距 */
  background-color: #f8f9fa; /* 背景色 */
  border-radius: 8px; /* 圆角 */
}

/* 信息列表样式 */
.info-section ul {
  padding-left: 20px; /* 左内边距（列表缩进） */
  margin: 10px 0 0; /* 外边距 */
}

/* 信息列表项样式 */
.info-section li {
  margin-bottom: 8px; /* 底部间距 */
  color: #666; /* 文字颜色 */
}
</style> 